<template>
<!-- 选项按钮 -->
<div>
  <div class="btn-group" id="navigation">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Options<span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a style="cursor: pointer" data-toggle="modal" data-target="#exampleModal">Query</a></li>
    <li role="separator" class="divider"></li>
    <li><a style="cursor: pointer" data-toggle="modal" data-target="#exampleModal1" >Way</a></li>
  </ul>
</div>
<!-- 查询地点 -->
<div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Query</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Place:</label>
            <input type="text" class="form-control" ref="place">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" data-dismiss="modal" @click="toSave" data-toggle="modal" data-target="#myModal2" >Go</button>
      </div>
    </div>
  </div>
</div>
<!-- 查询路线 -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Way</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Start:</label>
            <input type="text" class="form-control" ref="start">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Destination:</label>
            <input type="text" class="form-control" ref="destination" >
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" data-dismiss="modal" @click="toGo" data-toggle="modal" data-target="#myModal1">Go</button>
      </div>
    </div>
  </div>
</div>
<!-- 查询结果栏 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>

        <div class="media list" v-for="item in result" :key="item.name">
      <div class="media-body">
      <h4 class="media-heading">{{item.name}}</h4>
      <span>
      {{item.description}}
      </span>
    </div>
     </div> 
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- 路径结果栏 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>

        <div class="media list" v-for="item in result" :key="item.name">
      <div class="media-body">
      <h4 class="media-heading">{{item.name}} --> {{item.nameOther}}</h4>
      <span>
      共计路程：{{item.row}} m
      </span>
    </div>
     </div> 
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         <button type="submit" class="btn btn-primary" data-dismiss="modal" @click="showMap">Show way</button>
      </div>
    </div>
  </div>
</div>

</div>
   
</template>

<script>
export default {
   data(){
    return{
      result:[],
      walking:null
    }
  },
  methods :{
    toGo(){
        map.clearOverlays();     
      this.$http.jsonp("http://127.0.0.1:7001/goto",{
         params: {
          key1:this.$refs.start.value,
          key2:this.$refs.destination.value
        }
       }).then(
         function (data){
          this.result = data.data.data
         }
       );
    },
    toSave(){
       this.$http.jsonp("http://127.0.0.1:7001/query",{
         params: {
          key:this.$refs.place.value
        }
       }).then(
         function (data){
            this.result = data.data.data

         }
       );
    },
    showMap(){
       this.walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
       this.walking.search(this.result[0].name, this.result[0].nameOther);
    }
  },
}
</script>

<style>
.list{
  margin: 1vw;
  padding: 1vw;
  border-radius:0.5vw;
  background-color: rgb(178, 180, 178);
}
#navigation{
    top: 0vw;
    display: block;    
    margin: 1.5vw;
    position: fixed;
    z-index: 5;

}
</style>

